<template>
	<view>
		<u-navbar
			title="监控列表"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<view style="padding: 0 24rpx;">
			<u-tabs :list="list1" :lineColor="appColor" :lineWidth="42" :activeStyle="{color: appColor}" :inactiveStyle="{color: '#333'}"></u-tabs>
			<view style="height: 8px"/>
		</view>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view style="padding: 16rpx 32rpx;">
				<u-row gutter="16" v-for="(row, rowIndex) in list" :key="rowIndex">
					<u-col span="6" v-for="(col, colIndex) in row" :key="colIndex">
						<Camera :playInfo="col"/>
					</u-col>
				</u-row>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import Camera from '@/components/camera';
	export default {
		components: {
			Camera
		},
		data() {
			return {
				list1: [
					{name: '全部'},
					{name: '球机监控'},
					{name: '枪机监控'},
				],
				list: [
					[{name: '姜家1号鸡舍'}, {name: '姜家2号鸡舍'}],
					[{name: '姜家1号鸡舍'}, {name: '姜家2号鸡舍'}],
					[{name: '姜家1号鸡舍'}],
				]
			}
		},
		computed: {
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 - 44 - 8 + 'px';
			},
			customNavHeight() {
				return this.statusBarHeight + 44 + 'px';
			},
		},
		
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>

